<template>
	<view class="balance-page">
		<!-- 用户信息与资产概览 -->
		<view class="user-asset">
			<image 
				:src="userInfo.avatar || '/static/avatar-default.png'" 
				class="avatar" 
				mode="aspectFit" 
				@click="goToLogin"
			/>
			<text class="username" @click="goToLogin">{{ userInfo.nickname || '点击登录' }}</text>
			<view class="asset-list">
				<view class="asset-item">
					<text class="asset-label">总资产 (元)</text>
					<text class="asset-value">{{ totalAsset.toFixed(2) }}</text>
				</view>
				<view class="asset-item">
					<text class="asset-label">累计充值 (元)</text>
					<text class="asset-value">{{ totalRecharge.toFixed(2) }}</text>
				</view>
				<view class="asset-item">
					<text class="asset-label">累计消费 (元)</text>
					<text class="asset-value">{{ totalConsume.toFixed(2) }}</text>
				</view>
			</view>
		</view>

		<!-- 充值套餐列表 -->
		<view class="recharge-list">
			<view class="recharge-item" v-for="(item, index) in rechargePlans" :key="index">
				<text class="plan-desc">{{ item.desc }}</text>
				<button 
					class="recharge-btn" 
					:disabled="!isLogin"
					@click="handleRecharge(item.amount, item.gift)"
				>
					{{ isLogin ? '充值' : '请登录' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}, // 存储用户信息
				isLogin: false, // 登录状态标识
				totalAsset: 0, // 总资产（动态计算）
				totalRecharge: 0, // 累计充值
				totalConsume: 0, // 累计消费
				rechargePlans: [{
						amount: 100,
						gift: 30,
						desc: '充值￥100 赠送￥30'
					},
					{
						amount: 500,
						gift: 100,
						desc: '充值￥500 赠送￥100'
					},
					{
						amount: 1000,
						gift: 300,
						desc: '充值￥1000 赠送￥300'
					}
				]
			};
		},
		onShow() {
			// 每次页面显示都检查登录状态和更新数据
			this.checkLoginStatus();
		},
		methods: {
			// 检查登录状态并加载用户数据
			checkLoginStatus() {
				const token = uni.getStorageSync('token');
				const userInfo = uni.getStorageSync('userInfo');
				
				if (token && userInfo) {
					this.isLogin = true;
					this.userInfo = userInfo;
					// 加载用户资产数据（实际项目中应调用接口）
					this.loadUserAssets();
				} else {
					this.isLogin = false;
					this.userInfo = {};
					// 未登录时重置数据
					this.resetAssets();
				}
			},
			
			// 加载用户资产数据（模拟接口请求）
			loadUserAssets() {
				// 实际项目中应替换为真实接口请求
				uni.request({
					url: `${this.baseUrl}/user/assets`,
					method: 'GET',
					header: {
						Authorization: `Bearer ${uni.getStorageSync('token')}`
					},
					success: (res) => {
						// 模拟接口返回数据
						const mockData = {
							totalRecharge: 3900,
							totalConsume: 1470
						};
						this.totalRecharge = mockData.totalRecharge;
						this.totalConsume = mockData.totalConsume;
						// 计算总资产 = 累计充值 - 累计消费
						this.totalAsset = this.totalRecharge - this.totalConsume;
					},
					fail: () => {
						uni.showToast({
							title: '加载资产失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 未登录时重置资产数据
			resetAssets() {
				this.totalAsset = 0;
				this.totalRecharge = 0;
				this.totalConsume = 0;
			},
			
			// 跳转到登录页
			goToLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: "/pages/index/login/login"
					});
				}
			},
			
			// 处理充值逻辑
			handleRecharge(amount, gift) {
				if (!this.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					this.goToLogin();
					return;
				}
				
				uni.showModal({
					title: '确认充值',
					content: `充值${amount}元，赠送${gift}元，是否确认？`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '充值中...'
							});
							
							// 模拟充值接口请求
							setTimeout(() => {
								uni.hideLoading();
								
								// 计算实际到账金额（本金+赠送）
								const actualAmount = amount + gift;
								
								// 更新资产数据
								this.totalRecharge += amount; // 累计充值只算本金
								this.totalAsset += actualAmount; // 总资产增加本金+赠送
								
								// 保存更新后的数据（实际项目中应同步到后端）
								uni.setStorageSync('userAssets', {
									totalRecharge: this.totalRecharge,
									totalConsume: this.totalConsume,
									totalAsset: this.totalAsset
								});
								
								uni.showToast({
									title: `充值成功，到账${actualAmount}元`,
									icon: 'success'
								});
							}, 1500);
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	.balance-page {
		min-height: 100vh;
		background-color: #fff;
	}

	/* 用户资产区域 */
	.user-asset {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		background: linear-gradient(135deg, #f5f5f5 0%, #e9e9e9 100%);
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
		cursor: pointer; /* 显示点击指针 */
	}

	.username {
		font-size: 32rpx;
		margin-bottom: 30rpx;
		color: #333;
		cursor: pointer; /* 显示点击指针 */
		text-decoration: underline; /* 下划线提示可点击 */
	}

	.asset-list {
		display: flex;
		justify-content: space-around;
		width: 100%;
		padding: 0 20rpx;
	}

	.asset-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1; /* 平均分配宽度 */
	}

	.asset-label {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.asset-value {
		font-size: 30rpx;
		font-weight: bold;
		color: #e53935;
	}

	/* 充值套餐列表 */
	.recharge-list {
		padding: 30rpx;
	}

	.recharge-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border: 1rpx solid #f5f5f5;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.plan-desc {
		font-size: 28rpx;
		color: #333;
	}

	.recharge-btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		background-color: #e53935;
		color: #fff;
		font-size: 24rpx;
		padding: 0; /* 去除默认内边距 */
	}

	.recharge-btn[disabled] {
		background-color: #ccc;
		color: #fff;
	}
</style>